<template lang="html">
  <div class="goodsdetails_box">
    <ul class="orderdetails_main">
      <li class="shipment" v-for='item in goodsname'>
        <div class="shopName">
            <h2 class="orderNumber">订单号:{{item.ordername}}</h2>
            <h3 class="orderStatus" v-if="item.zhuangtai == 'unpay'">为付款</h3>
            <h3 class="orderStatus" v-if="item.zhuangtai == 'send_mobile_fahuo_apply'||item.zhuangtai == 'prize_unoption'||item.zhuangtai == 'guess'||item.zhuangtai == 'unprize_unoption'||item.zhuangtai == 'prize_goods_unsend_apply'||item.zhuangtai == 'unprize_goods_unsend_apply'||item.zhuangtai == 'prize_goods_send_mobile_fahuo_apply'||item.zhuangtai == 'unprize_goods_send_mobile_fahuo_apply'||item.zhuangtai == 'send_mobile_fahuo_apply'">待发货</h3>
            <h3 class="orderStatus" v-if="item.zhuangtai == 'send_back_fahuo_comfirm'||item.zhuangtai == 'unprize_send_back_fahuo_comfirm'||item.zhuangtai == 'prize_goods_send_back_fahuo_comfirm'||item.zhuangtai == 'dfdsend_back_fahuo_comfirmfgg'">待收货</h3>
            <h3 class="orderStatus" v-if="item.zhuangtai == 'send_mobile_shouhuo_comfirm'||item.zhuangtai == 'prize_goods_send_mobile_shouhuo_comfirm'||item.zhuangtai == 'unprize_ungoods_send_mobile_shouhuo_comfirm'||item.zhuangtai == 'send_mobile_shouhuo_comfirm'">已完成</h3>
            <h3 class="orderStatus" v-if="item.zhuangtai == 'exchange_yue'||item.zhuangtai == 'exchange_jifen'">已成功兑换</h3>
        </div>
        <div class="commodity">
          <router-link  :to="{path:'/orderdetails',query:{id:item.id,type:item.dinfdantype}}" >
            <img :src="item.goods_info.sp_thumb" :alt="item.goods_info.sp_title" class="goods_img" v-if="item.zhuangtai == 'prize_unoption'||item.zhuangtai == 'exchange_yue'||item.zhuangtai == 'prize_goods_send_mobile_fahuo_apply'">
            <img :src="item.goods_info.thumb" :alt="item.goods_info.title" class="goods_img" v-else>
            <p class="goodsname_main" v-if="item.zhuangtai == 'prize_unoption'||item.zhuangtai == 'exchange_yue'||item.zhuangtai == 'prize_goods_send_mobile_fahuo_apply'">{{item.goods_info.sp_title}}</p>
            <p class="goodsname_main" v-else>{{item.goods_info.title}}</p>
            <p class="goods_pirce" v-if="item.zhuangtai == 'prize_unoption'||item.zhuangtai == 'exchange_yue'||item.zhuangtai == 'prize_goods_send_mobile_fahuo_apply'">￥{{item.sp_price}}</p>
            <p class="goods_pirce" v-else>￥{{item.price}}</p>
            <p class="goods_num">*{{item.num}}</p>
            <h3 class="guess_jiegou" v-if="item.zhuangtai =='guess'">
              <i class="zhong"></i>
            </h3>
            <h3 class="guess_jiegou" v-else-if="item.zhuangtai =='prize_unoption'">
              <i class="chgong"></i>
            </h3>
            <h3 class="guess_jiegou" v-else-if="item.zhuangtai =='unprize_unoption'">
              <i class="shipai"></i>
            </h3>
          </router-link>
        </div>
        <h2 class="total">共件商品{{item.num}}件合计：￥
          <span v-if="item.zhuangtai == 'prize_unoption'||item.zhuangtai == 'exchange_yue'||item.zhuangtai == 'prize_goods_send_mobile_fahuo_apply'">{{item.sp_price*item.num}}</span>
          <span v-else>{{item.price*item.num}}</span>
        </h2>
        <div class="operation" v-if="item.zhuangtai !='exchange_yue'||item.zhuangtai !='exchange_jifen'||item.zhuangtai !='guess'||item.zhuangtai !='prize_goods_send_mobile_shouhuo_comfirm'||item.zhuangtai !='unprize_ungoods_send_mobile_shouhuo_comfirm'||item.zhuangtai !='send_mobile_shouhuo_comfirm'||item.zhuangtai !='send_mobile_shouhuo_comfirm'">
            <h3 class="payment" v-if="item.zhuangtai =='unpay'">付款</h3>
            <h3 class="cancel" v-if="item.zhuangtai =='unpay'">取消</h3>
            <router-link class="objects" v-if="item.zhuangtai =='prize_unoption'||item.zhuangtai =='unprize_unoption'" :to="{path:'/orderodjects',query:{id:item.id,goodsid:item.goods_info.id,type:item.zhuangtai,numer:item.num}}">兑换实物</router-link>
            <h3 class="balance" v-on:click="balance(item.id,'exchange_yue')" v-if="item.zhuangtai =='prize_unoption'">兑换余额</h3>
            <h3 class="Convertibility" v-on:click="Convertibility(item.id,'exchange_jifen')" v-if="item.zhuangtai =='unprize_unoption'">兑换积分</h3>
            <h3 class="delivery" v-if="item.zhuangtai =='prize_goods_send_mobile_fahuo_apply'||item.zhuangtai =='unprize_goods_send_mobile_fahuo_apply'||item.zhuangtai =='send_mobile_fahuo_apply'||item.zhuangtai =='send_mobile_fahuo_apply'">等待发货</h3>
            <h3 class="Confirmation" v-if="item.zhuangtai =='prize_goods_send_back_fahuo_comfirm'||item.zhuangtai =='unprize_send_back_fahuo_comfirm'||item.zhuangtai =='send_back_fahuo_comfirm'||item.zhuangtai =='send_back_fahuo_comfirm'">确认收货</h3>
            <!-- <h3 class="update">升级</h3>
            <h3 class="notsj_btn">提货</h3> -->
        </div>
      </li>
    </ul>
    <confirm v-bind:confirmModalOptions="confirmOptions" ref="myConfirm"></confirm>
  </div>
</template>
<script type="text/javascript">
  import confirm from "../../alert/confirm.vue";
  export default {
    props:['goodsname'],
    data(){
      return {
        confirmOptions:{},
      }
    },
    methods:{
      balance:function(orderid,ordertype){
        let conet = this,
        cur_id = sessionStorage.getItem("cur_id"),
        sign = sessionStorage.getItem("sign"),
        _url = "/index.php?g=app&m=shopping&a=update_order_post",
        _data = {
          cur_id:cur_id,
          sign:sign,
          id:orderid,
          option:ordertype
        };
        conet.$refs.myConfirm.showModel();
        conet.confirmOptions= {
          title: "兑换余额",//提示
          title_right: "",//提示
          message: '您确定要兑换余额吗？',
          btnSubmitText: "确定",//确定
          btnCancelText: "取消",//取消
          btnSubmitFunction: function () {
            conet.$http.post(_url,_data).then(function(data){
              if(data.data.status== "1"){
                conet.$toast("已成功兑换余额");
              }else {
                
              }
            },function(response){
                conet.$toast(response);
            })
          },
          btnCancelFunction: function () {
            seft.$toast("已取消");
          }
        } 
      },
      Convertibility:function(orderid,ordertype){
        let conet = this,
        cur_id = sessionStorage.getItem("cur_id"),
        sign = sessionStorage.getItem("sign"),
        _url = "/index.php?g=app&m=shopping&a=update_order_post",
        _data = {
          cur_id:cur_id,
          sign:sign,
          id:orderid,
          option:ordertype
        };
        conet.$refs.myConfirm.showModel();
        conet.confirmOptions= {
          title: "兑换积分",//提示
          title_right: "",//提示
          message: '您确定要兑换积分吗？',
          btnSubmitText: "确定",//确定
          btnCancelText: "取消",//取消
          btnSubmitFunction: function () {
            conet.$http.post(_url,_data).then(function(data){
              if(data.data.status== "1"){
                conet.$toast("已成功兑换余额");
              }else {
                conet.$toast(data.data.info);
              }
            },function(response){
                conet.$toast(response);
            })
          },
          btnCancelFunction: function () {
            conet.$toast("已取消");
          }
        }
      }
    },
    components:{
      'confirm':confirm
    }
  }
</script>
<style type="text/css" lang="less">
  @import '../../../assets/less/index.less';
  .goodsdetails_box{
    width: 100vw;
    margin-top: 2vw;
    .orderdetails_main{
      width: 100vw;
      .shipment{
        width:100%;
        margin: 3vw auto 0 auto; 
        position: relative;
        border-top: solid 1px @color8;
        box-shadow: 0px 10px 10px @color8;
        .shopName,.commodity{
          width:@width;
          margin: 0 auto;
          border-bottom: solid 1px @color8;
          overflow: hidden;
          zoom:1;
        }
        .shopName{
          height: 10vw;
          line-height: 10vw;
          .orderNumber{
            float: left;
          }
          .orderStatus{
            float: right;
          }
        }
        .commodity{
          font-size: @h3_font_size;
          a{
            margin: 2.6vw 0vw;
            display: block;
            color: @color7;
            overflow: hidden;
            zoom:1;
            .goods_img{
              width: 13.6vw;
              height: 13.6vw;
              border-radius: 1vw;
              float: left;
            }
            .goodsname_main{
              width: 50vw;
              text-align: left;
              float: left;
              line-height: 5vw;
              margin-left: 2vw;
            }
            .goods_pirce,.goods_num{
              float: right;
              text-align: right;
              width: 25vw;
              line-height: 5vw;
            }
          }
        }
        .total{
            width:@width;
            height: 10vw;
            line-height: 10vw;
            margin: 0 auto;
            border-bottom: solid 1px @color8;
            text-align: right;
            span{
              color: @color;
            }
          }
        .operation{
          width: 100%;
          border-bottom: solid 1px @color8;
          overflow: hidden;
          zoom:1;
          h3,a{
            display: block;
            padding: 1.5vw 4vw;
            border-radius: 1vw;
            border: solid 1px @color;
            margin-right: 4vw;
            margin-top: 1vw; 
            margin-bottom: 1vw;
            float: right;
            color: #fff;
          }
          .payment{
            background-color: #fca319;
          }
          .cancel{
            background-color: #e74c4c;
          }
          .balance{
            background-color: #fca319;
          }
          .objects{
            background-color: #e74c4c;
          }
          .Convertibility{
            background-color: #cfa972;
          }
          .delivery{
            background-color: #e74c4c;
          }
          .Confirmation{
            background-color: #e74c4c;
          }
        }
        // 结果显示
        .guess_jiegou{
          position: absolute;
          top: 20vw;
          left: 10vw;
          i{
            display: inline-block;
          }
          .zhong{
            .icon-seal_01();
          }
          .shipai{
            .icon-seal_02();
          }
          .chgong{
            .icon-seal_03();
          }
        }
      }
    }
  }
</style>